λ λΉ λ₯Έ μΉ μ ν리μΌμ΄μ μ μν΄ μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ©μ μ΅μ ννμΈμ. μ½λ λΆν , νΈλ¦¬ μμ΄νΉ, μ¬μ λ‘λ©, μ§μ° λ‘λ© κ°μ κΈ°μ μ λ°°μ°κ³ μ μΈκ³μ μΌλ‘ μ±λ₯μ ν₯μμν€μΈμ!
μλ°μ€ν¬λ¦½νΈ λͺ¨λ μ±λ₯: λ‘λ© μ΅μ νλ₯Ό μν κΈλ‘λ² κ°μ΄λ
μ€λλ μ μΉ κ°λ° νκ²½μμ μλ°μ€ν¬λ¦½νΈ λͺ¨λμ νμ₯ κ°λ₯νκ³ μ μ§λ³΄μνκΈ° μ¬μ΄ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° νμμ μ λλ€. κ·Έλ¬λ λΉν¨μ¨μ μΈ λͺ¨λ λ‘λ©μ μΉμ¬μ΄νΈ μ±λ₯μ μ¬κ°ν μν₯μ λ―Έμ³ μ¬μ©μ κ²½νμ μ νμν¬ μ μμ΅λλ€. μ΄ κ°μ΄λλ λͺ¨λ κ·λͺ¨μ νλ‘μ νΈμ μ μ©ν μ μλ μλ°μ€ν¬λ¦½νΈ λͺ¨λ μ΅μ ν κΈ°λ²μ λν ν¬κ΄μ μΈ κ°μλ₯Ό μ 곡νμ¬ μ μΈκ³ μ¬μ©μμκ² μ΅μ μ λ‘λ© μ±λ₯μ 보μ₯ν©λλ€.
μλ°μ€ν¬λ¦½νΈ λͺ¨λ μ΄ν΄νκΈ°
μ΅μ ν μ λ΅μ λν΄ μμ보기 μ μ, λ€μν μ νμ μλ°μ€ν¬λ¦½νΈ λͺ¨λμ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€:
- CommonJS (CJS): μμ¬μ μΌλ‘ Node.jsμμ μ¬μ©λ CJSλ
require()μmodule.exportsλ₯Ό μ¬μ©ν©λλ€. μ¬μ ν μ ν¨νμ§λ§, λκΈ°μ νΉμ± λλ¬Έμ λΈλΌμ°μ νκ²½μλ λ μ ν©ν©λλ€. - λΉλκΈ° λͺ¨λ μ μ (AMD): λΈλΌμ°μ μμ λΉλκΈ° λ‘λ©μ μν΄ μ€κ³λ AMDλ
define()μ μ¬μ©ν©λλ€. RequireJSμ κ°μ λΌμ΄λΈλ¬λ¦¬κ° μΈκΈ° μλ ꡬν체μμ΅λλ€. - ECMAScript λͺ¨λ (ESM): νλμ μΈ νμ€μΈ ESMμ
importμexportꡬ문μ μ¬μ©ν©λλ€. μ΅μ λΈλΌμ°μ μμ κΈ°λ³Έμ μΌλ‘ μ§μλλ©° μ μ λΆμ λ° νΈλ¦¬ μμ΄νΉκ³Ό κ°μ μ΄μ μ μ 곡ν©λλ€. - λ²μ© λͺ¨λ μ μ (UMD): λͺ¨λ λͺ¨λ μμ€ν (CJS, AMD λ° μ μ μ€μ½ν)κ³Ό νΈνλλλ‘ μλν©λλ€. λ€μ¬λ€λ₯νμ§λ§ μ€λ²ν€λλ₯Ό μΆκ°ν μ μμ΅λλ€.
νλ μΉ κ°λ°μμλ μ±λ₯μμ μ΄μ κ³Ό λ€μ΄ν°λΈ λΈλΌμ°μ μ§μμΌλ‘ μΈν΄ ESMμ΄ κΆμ₯λλ μ κ·Ό λ°©μμ λλ€. μ΄ κ°μ΄λλ μ£Όλ‘ ESM λ‘λ© μ΅μ νμ μ€μ μ λ κ²μ λλ€.
μ΅μ νμ μ€μμ±
μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ© μ΅μ νκ° μ κ·Έλ κ² μ€μν κΉμ? μ¬κΈ° λͺ κ°μ§ μ£Όμ μ΄μ κ° μμ΅λλ€:
- μ¬μ©μ κ²½ν κ°μ : λ‘λ© μκ°μ΄ λΉ¨λΌμ§λ©΄ λ λ°μμ΄ λΉ λ₯΄κ³ μ¦κ±°μ΄ μ¬μ©μ κ²½νμΌλ‘ μ΄μ΄μ§λλ€. μ¬μ©μλ λ μ€λ λ¨Έλ¬Όκ³ μμ μ μλ£ν κ°λ₯μ±μ΄ λμμ§λλ€.
- κ²μ μμ§ μ΅μ ν(SEO) ν₯μ: ꡬκΈκ³Ό κ°μ κ²μ μμ§μ μΉμ¬μ΄νΈ μλλ₯Ό μμ κ²°μ μμΈμΌλ‘ κ³ λ €ν©λλ€. λ‘λ© μ±λ₯μ μ΅μ ννλ©΄ κ²μ μμ§ μμλ₯Ό ν₯μμν¬ μ μμ΅λλ€.
- λμν μλΉ κ°μ: νμν μ½λλ§ λ‘λ©ν¨μΌλ‘μ¨ λμν μλΉλ₯Ό μ€μ¬ μ¬μ©μμ λΉμ©μ μ μ½νκ³ λλ¦° μ°κ²° νκ²½μμμ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€. μ΄λ μΈν°λ· μ μμ΄ μ νμ μ΄κ±°λ λΉμΌ μ§μμμ νΉν μ€μν©λλ€. μλ₯Ό λ€μ΄, λ¨μλ©λ¦¬μΉ΄λ μν리카μ μΌλΆ μ§μμμλ λ°μ΄ν° λΉμ©μ΄ μ§μ μ₯λ²½μ΄ λ μ μμ΅λλ€.
- μ νμ¨ μ¦λ: μ°κ΅¬μ λ°λ₯΄λ©΄ μΉμ¬μ΄νΈ μλμ μ νμ¨ μ¬μ΄μλ μ§μ μ μΈ μκ΄κ΄κ³κ° μμ΅λλ€. λ‘λ© μκ°μ΄ λΉ¨λΌμ§λ©΄ λ λ§μ νλ§€, κ°μ λ° κΈ°ν μνλ νλμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
- λͺ¨λ°μΌ μ±λ₯ ν₯μ: λͺ¨λ°μΌ μ₯μΉλ λ°μ€ν¬ν± μ»΄ν¨ν°λ³΄λ€ νλ‘μΈμμ λ€νΈμν¬ μ°κ²°μ΄ λλ¦° κ²½μ°κ° λ§μ΅λλ€. μ’μ λͺ¨λ°μΌ κ²½νμ μ 곡νκΈ° μν΄μλ λ‘λ© μ±λ₯ μ΅μ νκ° λ§€μ° μ€μν©λλ€.
μ΅μ ν κΈ°λ²
μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ©μ μ΅μ ννλ λ° μ¬μ©ν μ μλ λͺ κ°μ§ κΈ°λ²μ λ€μκ³Ό κ°μ΅λλ€:
1. μ½λ λΆν (Code Splitting)
μ½λ λΆν μ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό νμμ λ°λΌ λ‘λν μ μλ λ μμ λ²λ€λ‘ λλλ κ³Όμ μ λλ€. μ΄λ νμ¬ νμ΄μ§λ κΈ°λ₯μ νμν μ½λλ§ λ‘λνμ¬ μ΄κΈ° λ‘λ μκ°μ μ€μ¬μ€λλ€.
μ₯μ :
- μ΄κΈ° λ‘λ μκ°μ μ€μ λλ€.
- μ²΄κ° μ±λ₯μ ν₯μμν΅λλ€.
- 리μμ€μ λ³λ ¬ λ‘λ©μ νμ©ν©λλ€.
μ½λ λΆν μ ν:
- μ§μ μ λΆν (Entry Point Splitting): λ€λ₯Έ μ§μ μ (μ: λ€λ₯Έ νμ΄μ§μ λν λ³λμ λ²λ€)μ κΈ°λ°μΌλ‘ μ½λλ₯Ό λΆν ν©λλ€.
- λμ μν¬νΈ(Dynamic Imports):
import()ꡬ문μ μ¬μ©νμ¬ νμν λ λͺ¨λμ λ‘λν©λλ€. μ΄λ₯Ό ν΅ν΄ μ½λκ° νμν λλ§ λ‘λν μ μμ΅λλ€. - λ²€λ λΆν (Vendor Splitting): μλνν° λΌμ΄λΈλ¬λ¦¬λ₯Ό λ³λμ λ²λ€λ‘ λΆλ¦¬ν©λλ€. μ΄λ κ² νλ©΄ μμ£Ό λ³κ²½λμ§ μλ λΌμ΄λΈλ¬λ¦¬λ₯Ό λ ν¨κ³Όμ μΌλ‘ μΊμν μ μμ΅λλ€.
μμ (λμ μν¬νΈ):
async function loadComponent() {
const { default: Component } = await import('./Component.js');
const componentInstance = new Component();
document.body.appendChild(componentInstance.render());
}
loadComponent();
μ΄ μμ μμ Component.js λͺ¨λμ loadComponent() ν¨μκ° νΈμΆλ λλ§ λ‘λλ©λλ€. μ΄λ νΉν μ»΄ν¬λνΈκ° ν° κ²½μ° μ΄κΈ° λ‘λ μκ°μ ν¬κ² μ€μΌ μ μμ΅λλ€.
λꡬ: Webpack, Rollup, Parcel
2. νΈλ¦¬ μμ΄νΉ(Tree Shaking)
νΈλ¦¬ μμ΄νΉμ μλ°μ€ν¬λ¦½νΈ λ²λ€μμ μ¬μ©λμ§ μλ μ½λλ₯Ό μ κ±°νλ κ³Όμ μ λλ€. μ΄λ λ²λ€ ν¬κΈ°λ₯Ό μ€μ¬ λ‘λ© μκ°μ λ¨μΆμν΅λλ€. νΈλ¦¬ μμ΄νΉμ ESM λͺ¨λμ μ μ ꡬ쑰μ μμ‘΄νμ¬ λ°λ μ½λλ₯Ό μλ³νκ³ μ κ±°ν©λλ€.
μ₯μ :
- λ²λ€ ν¬κΈ°λ₯Ό μ€μ λλ€.
- λ‘λ© μ±λ₯μ ν₯μμν΅λλ€.
- λΆνμν μ½λλ₯Ό μ κ±°ν©λλ€.
μλ λ°©μ:
- λ²λ€λ¬κ° μ½λλ₯Ό λΆμνκ³ μν¬νΈλ λͺ¨λ λͺ¨λμ μλ³ν©λλ€.
- κ·Έλ° λ€μ κ° λͺ¨λμ λΆμνμ¬ μ€μ λ‘ μ¬μ©λλ μ΅μ€ν¬νΈ(export)κ° λ¬΄μμΈμ§ κ²°μ ν©λλ€.
- μ¬μ©λμ§ μλ μ΅μ€ν¬νΈλ μ΅μ’ λ²λ€μμ μ κ±°λ©λλ€.
μμ :
// module.js
export function usedFunction() {
console.log('This function is used.');
}
export function unusedFunction() {
console.log('This function is not used.');
}
// main.js
import { usedFunction } from './module.js';
usedFunction();
μ΄ μμ μμ unusedFunctionμ νΈλ¦¬ μμ΄νΉ κ³Όμ μμ μ΅μ’
λ²λ€μμ μ κ±°λ κ²μ
λλ€.
λꡬ: Webpack, Rollup, Parcel (ESM μ§μ)
3. μ¬μ λ‘λ©(Preloading)κ³Ό ν리νμΉ(Prefetching)
μ¬μ λ‘λ©κ³Ό ν리νμΉμ 리μμ€λ₯Ό 미리 λ‘λνμ¬ μΉμ¬μ΄νΈμ μ²΄κ° μ±λ₯μ ν₯μμν€λ κΈ°λ²μ λλ€.
μ¬μ λ‘λ©(Preloading): νμ¬ νμ΄μ§μ νμν μ€μ 리μμ€λ₯Ό λ‘λν©λλ€. μ΄λ₯Ό ν΅ν΄ νμν λ 리μμ€κ° μ¬μ© κ°λ₯νλλ‘ λ³΄μ₯νμ¬ μ§μ°μ λ°©μ§ν©λλ€.
ν리νμΉ(Prefetching): λ―Έλμ νμν κ°λ₯μ±μ΄ μλ 리μμ€λ₯Ό λ‘λν©λλ€. μ΄λ 리μμ€λ₯Ό 미리 μ€λΉν΄ λ μΌλ‘μ¨ νμ νμ΄μ§μ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
μ₯μ :
- μ²΄κ° μ±λ₯μ ν₯μμν΅λλ€.
- μ€μ 리μμ€μ λ‘λ© μκ°μ μ€μ λλ€.
- μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
μμ (μ¬μ λ‘λ©):
<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/script.js" as="script">
μ΄ μ½λλ styles.cssμ script.js νμΌμ 미리 λ‘λνμ¬ νμ΄μ§κ° νμν λ μ¬μ©ν μ μλλ‘ λ³΄μ₯ν©λλ€.
μμ (ν리νμΉ):
<link rel="prefetch" href="/next-page.html">
μ΄ μ½λλ next-page.html νμΌμ 미리 κ°μ Έμ€λ―λ‘ μ¬μ©μκ° ν΄λΉ νμ΄μ§λ‘ μ΄λν κ²½μ° μ¦μ μ¬μ©ν μ μμ΅λλ€.
ꡬν: HTMLμ <link rel="preload"> λ° <link rel="prefetch"> νκ·Έλ₯Ό μ¬μ©ν©λλ€.
4. μ§μ° λ‘λ©(Lazy Loading)
μ§μ° λ‘λ©μ μ€μνμ§ μμ 리μμ€μ λ‘λ©μ νμν λκΉμ§ μ§μ°μν€λ κΈ°λ²μ λλ€. μ΄λ μΉμ¬μ΄νΈμ μ΄κΈ° λ‘λ μκ°μ ν¬κ² μ€μΌ μ μμ΅λλ€.
μ₯μ :
- μ΄κΈ° λ‘λ μκ°μ μ€μ λλ€.
- μ²΄κ° μ±λ₯μ ν₯μμν΅λλ€.
- λμνμ μ μ½ν©λλ€.
μ§μ° λ‘λ© μ ν:
- μ΄λ―Έμ§ μ§μ° λ‘λ©: μ΄λ―Έμ§κ° λ·°ν¬νΈμ λ³΄μΌ λλ§ λ‘λ©ν©λλ€.
- μ»΄ν¬λνΈ μ§μ° λ‘λ©: μ»΄ν¬λνΈκ° νμν λ(μ: μ¬μ©μκ° νΉμ μμμ μνΈμμ©ν λ)λ§ λ‘λ©ν©λλ€.
μμ (μ΄λ―Έμ§ μ§μ° λ‘λ©):
<img src="placeholder.gif" data-src="image.jpg" class="lazy">
<script>
const lazyImages = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
lazyImages.forEach((img) => {
observer.observe(img);
});
</script>
μ΄ μ½λλ Intersection Observer APIλ₯Ό μ¬μ©νμ¬ μ΄λ―Έμ§κ° λ·°ν¬νΈμ λ³΄μΌ λλ§ λ‘λν©λλ€.
5. λͺ¨λ λ²λ€λ§κ³Ό μ΅μν(Minification)
λͺ¨λ λ²λ€λ§μ μ¬λ¬ μλ°μ€ν¬λ¦½νΈ νμΌμ νλμ νμΌλ‘ κ²°ν©νμ¬ μ ν리μΌμ΄μ μ λ‘λνλ λ° νμν HTTP μμ² μλ₯Ό μ€μ λλ€. μ΅μνλ μ½λμμ λΆνμν λ¬Έμ(곡백, μ£Όμ)λ₯Ό μ κ±°νμ¬ λ²λ€ ν¬κΈ°λ₯Ό λμ± μ€μ λλ€.
μ₯μ :
- HTTP μμ² μλ₯Ό μ€μ λλ€.
- λ²λ€ ν¬κΈ°λ₯Ό μ€μ λλ€.
- λ‘λ© μ±λ₯μ ν₯μμν΅λλ€.
λꡬ: Webpack, Rollup, Parcel, Terser, UglifyJS
6. HTTP/2μ HTTP/3
HTTP/2μ HTTP/3λ HTTP/1.1μ λΉν΄ μλΉν μ±λ₯ ν₯μμ μ 곡νλ μλ‘μ΄ λ²μ μ HTTP νλ‘ν μ½μ λλ€. μ΄ νλ‘ν μ½λ€μ λ©ν°νλ μ±, ν€λ μμΆ, μλ² νΈμμ κ°μ κΈ°λ₯μ μ§μνμ¬ λ‘λ© μκ°μ ν¬κ² λ¨μΆμν¬ μ μμ΅λλ€.
μ₯μ :
- λ‘λ© μ±λ₯ ν₯μ.
- μ§μ° μκ° κ°μ.
- λ λμ 리μμ€ νμ©.
ꡬν: μλ²κ° HTTP/2 λλ HTTP/3λ₯Ό μ§μνλμ§ νμΈνμΈμ. λλΆλΆμ μ΅μ μΉ μλ²λ κΈ°λ³Έμ μΌλ‘ μ΄λ¬ν νλ‘ν μ½μ μ§μν©λλ€.
7. μΊμ±(Caching)
μΊμ±μ μμ£Ό μ‘μΈμ€νλ 리μμ€λ₯Ό μΊμμ μ μ₯νμ¬ λμ€μ λ 빨리 κ²μν μ μλλ‘ νλ κΈ°λ²μ λλ€. μ΄λ νΉν μ¬λ°©λ¬Έμμ λ‘λ© μκ°μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
μΊμ± μ ν:
- λΈλΌμ°μ μΊμ±: λΈλΌμ°μ μ μΊμμ 리μμ€λ₯Ό μ μ₯ν©λλ€.
- CDN μΊμ±: μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)μ 리μμ€λ₯Ό μ μ₯ν©λλ€.
- μλ² μ¬μ΄λ μΊμ±: μλ²μ 리μμ€λ₯Ό μ μ₯ν©λλ€.
ꡬν:
- μ μ ν μΊμ ν€λλ₯Ό μ¬μ©νμ¬ λΈλΌμ°μ μ CDNμ΄ λ¦¬μμ€λ₯Ό μΊμνλ λ°©μμ μ μ΄ν©λλ€.
- CDNμ νμ©νμ¬ λ¦¬μμ€λ₯Ό μ μΈκ³μ μΌλ‘ λ°°ν¬ν©λλ€.
- μμ£Ό μ‘μΈμ€νλ λ°μ΄ν°μ λν΄ μλ² μ¬μ΄λ μΊμ±μ ꡬνν©λλ€.
8. μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)
CDNμ μ§λ¦¬μ μΌλ‘ λΆμ°λ μλ² λ€νΈμν¬μ λλ€. μΉμ¬μ΄νΈμ μ μ μμ°(μ΄λ―Έμ§, CSS, μλ°μ€ν¬λ¦½νΈ) μ¬λ³Έμ μ μ₯νκ³ μ¬μ©μμκ² κ°μ₯ κ°κΉμ΄ μλ²μμ μ΄λ₯Ό μ λ¬ν©λλ€. μ΄λ νΉν μλ³Έ μλ²μμ λ©λ¦¬ λ¨μ΄μ§ μ¬μ©μμκ² μ§μ° μκ°μ μ€μ΄κ³ λ‘λ© μκ°μ ν₯μμν΅λλ€.
μ₯μ :
- μ§μ° μκ° κ°μ.
- λ‘λ© μ±λ₯ ν₯μ.
- νμ₯μ± μ¦κ°.
μΈκΈ° μλ CDN: Cloudflare, Akamai, AWS CloudFront, Google Cloud CDN
μ΅μ νλ₯Ό μν λꡬ
μ¬λ¬ λκ΅¬κ° μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ© μ΅μ νμ λμμ μ€ μ μμ΅λλ€:
- Webpack: μ½λ λΆν , νΈλ¦¬ μμ΄νΉ λ° κΈ°ν μ΅μ ν κΈ°λ²μ μ§μνλ κ°λ ₯ν λͺ¨λ λ²λ€λ¬μ λλ€.
- Rollup: λΌμ΄λΈλ¬λ¦¬λ μκ·λͺ¨ μ ν리μΌμ΄μ μ λ§λλ λ° νΉν μ ν©ν λͺ¨λ λ²λ€λ¬μ λλ€. νΈλ¦¬ μμ΄νΉμ νμν©λλ€.
- Parcel: μ€μ μ΄ νμ μλ λ²λ€λ¬λ‘ μ¬μ©νκΈ° μ½κ³ λ§μ μ΅μ ν κΈ°λ²μ κΈ°λ³Έμ μΌλ‘ μ§μν©λλ€.
- Lighthouse: μΉμ¬μ΄νΈμ κ°μ μμμ μλ³ν μ μλ μ±λ₯ κ°μ¬ λꡬμ λλ€.
- Google PageSpeed Insights: μΉμ¬μ΄νΈ μ±λ₯ μ΅μ νλ₯Ό μν κΆμ₯ μ¬νμ μ 곡νλ λ λ€λ₯Έ μ±λ₯ κ°μ¬ λꡬμ λλ€.
- WebPageTest: λ€μν μμΉμ μ₯μΉμμ μΉμ¬μ΄νΈμ μ±λ₯μ ν μ€νΈν μ μλ μΉ μ±λ₯ ν μ€νΈ λꡬμ λλ€.
μ€μ μ¬λ‘ λ° μΌμ΄μ€ μ€ν°λ
μ΄λ¬ν μ΅μ ν κΈ°λ²μ μν₯μ μ€λͺ νκΈ° μν΄ λͺ κ°μ§ μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
- μ μ μκ±°λ μΉμ¬μ΄νΈ: ν μ μ μκ±°λ μΉμ¬μ΄νΈμμ μν μ΄λ―Έμ§μ λν΄ μ½λ λΆν κ³Ό μ§μ° λ‘λ©μ ꡬννμ΅λλ€. κ·Έ κ²°κ³Ό μ΄κΈ° λ‘λ μκ°μ΄ 30% κ°μνκ³ μ νμ¨μ΄ 15% μ¦κ°νμ΅λλ€.
- λ΄μ€ μΉμ¬μ΄νΈ: ν λ΄μ€ μΉμ¬μ΄νΈμμ CDNκ³Ό λΈλΌμ°μ μΊμ±μ ꡬννμ΅λλ€. μ΄λ‘ μΈν΄ νκ· νμ΄μ§ λ‘λ μκ°μ΄ 50% λ¨μΆλμκ³ μ¬μ©μ μ°Έμ¬λκ° ν¬κ² ν₯μλμμ΅λλ€.
- μμ λ―Έλμ΄ μ ν리μΌμ΄μ : ν μμ λ―Έλμ΄ μ ν리μΌμ΄μ μμ νΈλ¦¬ μμ΄νΉκ³Ό μ΅μνλ₯Ό ꡬννμ΅λλ€. μ΄λ‘ μΈν΄ μλ°μ€ν¬λ¦½νΈ λ²λ€ ν¬κΈ°κ° 20% κ°μνκ³ μ ν리μΌμ΄μ μ λ°μμ±μ΄ ν₯μλμμ΅λλ€.
μ΄λ¬ν μλ€μ μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ© μ΅μ νμ μ€μ§μ μΈ μ΄μ μ 보μ¬μ€λλ€. μ΄λ¬ν κΈ°λ²μ ꡬνν¨μΌλ‘μ¨ μΉμ¬μ΄νΈλ μ ν리μΌμ΄μ μ μ±λ₯μ ν¬κ² ν₯μμν€κ³ λ λμ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
κΈλ‘λ² κ³ λ €μ¬ν
μ μΈκ³ μ¬μ©μλ₯Ό μν΄ μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ©μ μ΅μ νν λλ λ€μ μμλ₯Ό κ³ λ €ν΄μΌ ν©λλ€:
- λ€νΈμν¬ μ‘°κ±΄: μ§μλ§λ€ μ¬μ©μμ λ€νΈμν¬ μλμ μ§μ° μκ°μ΄ λ€λ₯Ό μ μμ΅λλ€. λλ¦° μ°κ²°μμλ μ μλνλλ‘ μ½λλ₯Ό μ΅μ ννμΈμ.
- μ₯μΉ κΈ°λ₯: μ¬μ©μλ λ€μν μ²λ¦¬ λ₯λ ₯κ³Ό νλ©΄ ν¬κΈ°λ₯Ό κ°μ§ μ¬λ¬ μ₯μΉμμ μΉμ¬μ΄νΈμ μ μν μ μμ΅λλ€. λͺ¨λ μ₯μΉμμ λ°μμ±μ΄ λ°μ΄λκ³ μ±λ₯μ΄ μ’λλ‘ μ½λλ₯Ό μ΅μ ννμΈμ.
- λ°μ΄ν° λΉμ©: μΌλΆ μ§μμμλ λ°μ΄ν° λΉμ©μ΄ λμ μ μμ΅λλ€. λ€μ΄λ‘λν΄μΌ νλ λ°μ΄ν° μμ μ΅μννμ¬ μ¬μ©μ λΉμ©μ μ€μ΄μΈμ.
- μ κ·Όμ±: μ₯μ κ° μλ μ¬μ©μλ μΉμ¬μ΄νΈμ μ κ·Όν μ μλλ‘ λ³΄μ₯νμΈμ. μ¬κΈ°μλ μ΄λ―Έμ§μ λν λ체 ν μ€νΈ μ 곡, μλ§¨ν± HTML μ¬μ©, ν€λ³΄λ νμ κ°λ₯μ± λ³΄μ₯ λ±μ΄ ν¬ν¨λ©λλ€.
- νμ§ν: μΉμ¬μ΄νΈλ₯Ό λ€λ₯Έ μΈμ΄μ λ¬Ένμ λ§κ² μ‘°μ νμΈμ. μ¬κΈ°μλ ν μ€νΈ λ²μ, λ μ§ λ° μ«μ μμ μ§μ , μ μ ν μ΄λ―Έμ§ λ° μμ΄μ½ μ¬μ©μ΄ ν¬ν¨λ©λλ€.
λͺ¨λ² μ¬λ‘
μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ©μ μ΅μ νν λ λ°λΌμΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€:
- μ±λ₯ μΈ‘μ : μ±λ₯ κ°μ¬ λꡬλ₯Ό μ¬μ©νμ¬ κ°μ ν λΆλΆμ νμ νμΈμ.
- μ±λ₯ μμ° μ€μ : μΉμ¬μ΄νΈλ μ ν리μΌμ΄μ μ λν ꡬ체μ μΈ μ±λ₯ λͺ©νλ₯Ό μ μνμΈμ.
- μ€μ 리μμ€ μ°μ μμ μ§μ : νμ΄μ§μ μ΄κΈ° λ λλ§μ νμν μ€μ 리μμ€ λ‘λ© μ΅μ νμ μ§μ€νμΈμ.
- μ€μ μ₯μΉμμ ν μ€νΈ: λ€μν μ₯μΉμ λ€νΈμν¬ μ‘°κ±΄μμ μΉμ¬μ΄νΈλ₯Ό ν μ€νΈνμ¬ μ€μ νκ²½μμ μ μλνλμ§ νμΈνμΈμ.
- μ±λ₯ λͺ¨λν°λ§: μΉμ¬μ΄νΈμ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ νμμ λ°λΌ μ‘°μ νμΈμ.
κ²°λ‘
μλ°μ€ν¬λ¦½νΈ λͺ¨λ λ‘λ© μ΅μ νλ μ±λ₯μ΄ λ°μ΄λκ³ μ¬μ©μ μΉνμ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λ§€μ° μ€μν©λλ€. μ΄ κ°μ΄λμμ λ Όμλ κΈ°λ²μ ꡬνν¨μΌλ‘μ¨ μΉμ¬μ΄νΈμ λ‘λ© μλλ₯Ό ν¬κ² ν₯μμν€κ³ λμν μλΉλ₯Ό μ€μ΄λ©° μ μΈκ³ μ¬μ©μμ μ¬μ©μ κ²½νμ ν₯μμν¬ μ μμ΅λλ€. μ₯κΈ°μ μΌλ‘ μ΅μ νλ μνλ₯Ό μ μ§νκΈ° μν΄ μΉμ¬μ΄νΈμ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ νμμ λ°λΌ μ‘°μ νλ κ²μ μμ§ λ§μΈμ. μ΄λ¬ν μ§μμ μΈ κ°μ μ κ·Ό λ°©μμ μμΉλ μ₯μΉμ κ΄κ³μμ΄ λͺ¨λ μ¬μ©μμκ² μ μΈκ³μ μΌλ‘ μ κ·Ό κ°λ₯νκ³ μ¦κ±°μ΄ κ²½νμ 보μ₯ν©λλ€. μ΄λ¬ν μ λ΅μ μ§μ€ν¨μΌλ‘μ¨ μ±λ₯μ΄ μ’μ λΏλ§ μλλΌ λ€μν κ΅μ μ¬μ©μλ₯Ό λ§μ‘±μν€λ μΉμ¬μ΄νΈλ₯Ό ꡬμΆν μ μμ΅λλ€.